<!-- signinlist -->
<template>
  <div class="singin_list">
    <!-- <div class="singin_list_head">
      <div class="singin_head_p">签到活动列表</div>
    </div> -->
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="singin_centen">
      <div
        class="singin_centen_list"
        @click="golsit(item.id)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="singin_centen_list_img">
          <img :src="item.image_path" alt="" />
        </div>
        <div class="singin_centen_list_p">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeTop from "@/components/homeTop.vue";
export default {
  name: "signinlist",
  components: {
    HomeTop,
  },
  data() {
    return {
      topTitle: "签到活动列表",
      id: "",
      list: [],
    };
  },
  mounted() {
    this.siqninActList();
  },
  methods: {
    golsit(id) {
      this.id = id;
      this.$router.push({
        name: "signIn",
        query: {
          id: this.id,
        },
      });
    },
    siqninActList() {
      let url = "/mobile/signinActList";
      let data = {
        page: 1,
        perPage: 10,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.list = res.list;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.singin_list {
  width: 100vw;
  height: 100vh;
}
.singin_list_head {
  width: 100vw;
  height: 1.46rem;
  background: #1d2043;
  border: 1px solid #eff3fc;
}
.singin_head_p {
  font-size: 0.3rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.46rem;
  text-align: center;
}
.singin_centen {
  width: 90%;
  margin: 0 auto;
  margin-top: 15%;
}
.singin_centen_list {
  background: #fefefe;
  border-radius: 20px;
  display: flex;
  padding: 8% 5%;
  margin-top: 5%;
}
/* .singin_centen_listone {
  background: #fefefe;
  border-radius: 20px;
  display: flex;
  padding: 8% 5%;
  border: 1px solid #2fd37d;
  margin-top: 2%;
} */
.singin_centen_list_img img {
  width: 1.02rem;
  height: 0.94rem;
}
.singin_centen_list_p {
  margin-left: 0.3rem;
  font-size: 0.28rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 0.5rem;
}
</style>